<template>
  <div class="process-list-container">
    <div v-if="!list.length" class="first-question flex-center">
      暂无学生作答
    </div>
    <div class="process-box flex-column" v-else>
      <div
        class="flex"
        v-for="(item, index) in list"
        :key="index"
        :style="{ color: item.isCorrect ? item.color : 'unset' }"
      >
        <img v-if="item.statistics_type === 5" class="img" :src="item.text" />
        <div class="text" v-else>
          {{ item.text }}
        </div>
        <el-popover
          v-if="item.list.length"
          placement="top-start"
          trigger="hover"
          popper-class="pop-class"
        >
          <template #default>
            <div class="student-list flex-start">
              <div
                class="student-item"
                v-for="(student, sIndex) in item.list"
                :key="sIndex"
              >
                {{ student.student_name }}
              </div>
            </div>
          </template>
          <template #reference>
            <el-progress
              class="process-line hover"
              :percentage="getRate(item.list.length)"
              :stroke-width="20"
              :color="item.color"
            >
              <span class="process-text">{{ item.list.length }}人</span>
            </el-progress>
          </template>
        </el-popover>
        <el-progress
          v-else
          class="process-line hover"
          :percentage="getRate(item.list.length)"
          :stroke-width="20"
          :color="item.color"
        >
          <span class="process-text">{{ item.list.length }}人</span>
        </el-progress>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  sum: {
    required: true,
    type: Number,
    default: 0
  },
  processList: {
    required: true,
    type: Array
  }
})

const list = ref([])
watch(
  () => props.processList,
  () => {
    list.value = props.processList

    if (list.value.length && list.value[0].statistics_type === 5) {
      let index = list.value.findIndex(item => item.key === 'await_grade')
      let indexItem = list.value.splice(index, 1)
      list.value.push(...indexItem)
    }

    // 设置进度条的颜色 对 / 半对 / 错 / 待批改 / 分数非0显示的颜色
    let colorList = ['#4EC680', '#FBC25E', '#FF6D65', '#9B9DA3', '#5AADF9']
    list.value.forEach(item => {
      let color = ''
      if (item.statistics_type === 5) {
        switch (item.key) {
          case 'all_correct':
            color = colorList[0]
            break
          case 'part_correct':
            color = colorList[1]
            break
          case 'incorrect':
            color = colorList[2]
            break
          default:
            color = colorList[3]
        }
      } else if (item.statistics_type === 6) {
        item.key === 'zero_score'
          ? (color = colorList[2])
          : (color = colorList[4])
      } else {
        color = item.isCorrect ? colorList[0] : colorList[2]
      }
      item.color = color
    })
  }
)

const getRate = num => {
  let sum = list.value.map(item => item.list.length).reduce((a, b) => a + b, 0)
  console.log('sum', num, sum)
  return (num / (props.sum === 0 ? 1 : props.sum)) * 100
}
</script>

<style lang="less" scoped>
.process-list-container {
  .first-question {
    color: #b7b8bb;
    height: 100%;
    min-height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .process-box {
    margin-top: 20px;
    gap: 20px;

    .img {
      width: 24px;
      margin-bottom: 4px;
    }
    .text {
      word-wrap: break-word;
      text-align: right;
      min-width: 40px;
    }

    .process-line {
      align-items: center;
      flex: 1;
      margin-left: 10px;
      font-size: 16px;
      margin-top: -2px;

      .process-text {
        font-size: 16px;
      }
      :deep(.el-progress__text) {
        min-height: 30px !important;
      }
      /* stylelint-disable ebag/selector-class-pattern */
      :deep(.el-progress-bar__outer) {
        border-radius: unset;
      }

      :deep(.el-progress-bar__inner) {
        border-radius: unset;
      }
    }
  }
}
</style>
